<template>
	<view class="members">
		<!-- 广告图 -->
		<view v-for="(item,index) in data.membersImg" :key="index" class="membersImgCon">
			<image :src="item.url" mode="widthFix" class="membersImg"></image>
		</view>
		<view style="height: 100rpx;color: #33354a;">占位</view>
		<!-- 底部-固定 -->
		<view class="membersBottom">
			<view class="membersBottomLeft">
				<text>已有码，去兑换</text>
			</view>
			<view class="membersBottomRight">
				<text class="membersBottomText1">￥</text>
				<text class="membersBottomText2">299</text>
				<text class="membersBottomText3">开通以上全部</text>
			</view>
		</view>
		
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	
	const ipt_content = ref("");
	const data = ref({
		membersImg:[
			{
				id:1,
				url:'../../static/members/membersImg_01.png'
			},
			{
				id:2,
				url:'../../static/members/membersImg_02.png'
			},
			{
				id:3,
				url:'../../static/members/membersImg_03.png'
			},
			{
				id:4,
				url:'../../static/members/membersImg_04.png'
			},
			{
				id:5,
				url:'../../static/members/membersImg_05.png'
			},
			{
				id:6,
				url:'../../static/members/membersImg_06.png'
			},
			{
				id:7,
				url:'../../static/members/membersImg_07.png'
			},
			{
				id:8,
				url:'../../static/members/membersImg_08.png'
			},
			{
				id:9,
				url:'../../static/members/membersImg_09.png'
			},
			{
				id:10,
				url:'../../static/members/membersImg_10.png'
			},
			{
				id:11,
				url:'../../static/members/membersImg_11.png'
			},
			{
				id:12,
				url:'../../static/members/membersImg_12.png'
			},
			{
				id:13,
				url:'../../static/members/membersImg_13.png'
			},
			{
				id:14,
				url:'../../static/members/membersImg_14.png'
			},
			{
				id:15,
				url:'../../static/members/membersImg_15.png'
			},
			{
				id:16,
				url:'../../static/members/membersImg_16.png'
			},
			{
				id:17,
				url:'../../static/members/membersImg_17.png'
			},
			{
				id:18,
				url:'../../static/members/membersImg_18.png'
			},
			{
				id:19,
				url:'../../static/members/membersImg_19.png'
			},
			{
				id:20,
				url:'../../static/members/membersImg_20.png'
			},
			{
				id:21,
				url:'../../static/members/membersImg_21.png'
			},
			{
				id:22,
				url:'../../static/members/membersImg_22.png'
			},
			{
				id:23,
				url:'../../static/members/membersImg_23.png'
			},
			{
				id:24,
				url:'../../static/members/membersImg_24.png'
			},
			{
				id:25,
				url:'../../static/members/membersImg_25.png'
			},
			{
				id:26,
				url:'../../static/members/membersImg_26.png'
			},
			{
				id:27,
				url:'../../static/members/membersImg_27.png'
			},
			{
				id:28,
				url:'../../static/members/membersImg_28.png'
			},
			{
				id:29,
				url:'../../static/members/membersImg_29.png'
			},
			{
				id:30,
				url:'../../static/members/membersImg_30.png'
			},
			{
				id:31,
				url:'../../static/members/membersImg_31.png'
			},
			{
				id:32,
				url:'../../static/members/membersImg_32.png'
			},
			{
				id:33,
				url:'../../static/members/membersImg_33.png'
			},
			{
				id:34,
				url:'../../static/members/membersImg_34.png'
			}
		]
	})
	
</script>

<style scoped>
	.members {
		width: 100%;
		height: 100vh;
		background: #33354a;
	}
/* 会员页-广告图区域 */
  .membersImgCon {
	  display: flex;
	  flex-wrap: wrap;
  	  width: 100%;
	  overflow: hidden;
  	  background: #33354a;	  
  }
  /* 会员页-图片 */
  .membersImg {
  	  width: 100%;
	  margin-right: -0.5px; 
	  margin-bottom: -0.5px;
	  transform: scale(1.005); 
  }
  
  /* 底部-固定 */
  .membersBottom {
	  display: flex;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 100rpx;
  }
  /* 已有码，去兑换 */
  .membersBottomLeft {
	  display: flex;
	  background: #fae6d7;
	  color: #e47539;
	  align-items: center;
	  font-size: 26rpx;
	  padding: 0 70rpx 0 30rpx;
  }
  /* ？99 去开通全部会员-文字 */
  .membersBottomRight {
	  display: flex;
	  flex: 1;
	  justify-content: center;
	  align-items: center;
	  background: linear-gradient(to right,#feca55,#feb844,#fead39,#fe9b28);
	  color: #fff;
	  font-weight: 700;
  }
  
  /* 人民币符号 */
  .membersBottomText1 {
	  display: flex;
	  align-items: center;
	  font-size: 26rpx;
  }
  
  /* 价格 */
  .membersBottomText2 {
  	  font-size: 45rpx;
	  padding-right: 10rpx;
  }
  
  /* 文字 */
  .membersBottomText3 {
  	  font-size: 33rpx;
  }
</style>
